<!-- 评价组件 -->
<template>
  <div class="comment">
    <div class="userAppraise">
      <van-image
        width="28"
        height="28"
        :src="reply?.avatar"
      />
      <div class="userName">{{reply?.nickname}}</div>
			<van-rate v-model="startVal" :size="14"/>
    </div>
		<div class="timeBox">{{reply?.add_time}} {{reply?.sku}}</div>
		<div class="comment-content">{{reply?.comment}}</div>
		<div class="imgBox" v-if="reply?.pics">
			<van-image v-for="item in reply?.pics" :key="item" width="78" height="78" :src="item" />
		</div>
  </div>
</template>

<script setup>
import { computed, ref } from "@vue/reactivity";
const { reply } = defineProps({
	reply: {
		type: Object,
		required: true
	}
})
// 评分
const startVal = computed(()=>Number(reply?.star))

</script>
<style scoped lang="scss">
.comment {
  background: #fff;
  padding: 10px 15px 20px;
  font-size: 13px;
  .userAppraise {
		height: 28px;
		padding: 7px 0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
    .userName {
      padding: 0 6px 0 10px;
    }
  }
	.timeBox {
		font-size: 12px;
		color: #82848f;
		padding: 5px 0;
	}
	.comment-content{
		margin-bottom: 10px;
	}
	.imgBox{
		:deep(.van-image__img){
			padding-right: 10px;
		}
	}
}
</style>